<script setup lang="ts">
import Amount from '~comp-b/global-popups/invitation/Amount.vue';
import InvitationSpin from '~comp-b/global-popups/invitation/InvitationSpin.vue';
import { handleShare, useList } from '~/pages/invitation/hooks';
import Countdown from '~/pages/promo/pack/components/Countdown.vue';

const { status, difference } = useList();
const authed = useAuthed();
function onShare() {
  handleShare(status?.value?.withdraw_status);
}
</script>

<template>
  <div class="main flex flex-col gap-5">
    <div class="mb-5 flex-center lt-tabletl:mb-3">
      <TCard class="card min-w-50% px-5 text-center lt-tabletl:w-full !shadow-none">
        <Amount bit class="mb-3" />
        <I18nT v-if="difference > 0 && authed" keypath="agTwCh4pZ9FkrKsXbcHe" tag="p" class="text-sys-text-body">
          <template #diff>
            <TNum class="text-yellow-500" format="clamp-dec" :decimals="2" :value="difference" />
          </template>
        </I18nT>
        <p v-if="difference <= 0">
          {{ $t('czXyKhorDqV_4Fvqigcar') }}
        </p>
      </TCard>
    </div>
    <InvitationSpin :bit="false" bg />
    <div v-if="(status?.expire_time ?? 0) !== 0" class="flex-center flex-col gap-5">
      <span class="inline-block flex rounded-20 bg-sys-layer-a p-2 px-3 text-sys-text-body">
        {{ $t('qJwORmG51GvBtYzsDIl') }}
        <Countdown class="ml-2 text-white" :value="status?.expire_time ?? 0">
          <template #default="{ diff, formatText }">
            <span v-if="diff.d > 0">{{ formatText(diff.d, 'd ', false) }}</span>
            <span>{{ `${formatText(diff.h, ':')}${formatText(diff.m, ':')}${formatText(diff.s)}` }}</span>
          </template>
        </Countdown>
      </span>
      <AButton type="primary" class="ant-cover__Button-3d-primary min-w-80" @click="onShare">
        {{ $t('igRiars9T2kzQciryyUQv') }}
        <i class="i-ri:share-forward-fill ml-2" />
      </AButton>
    </div>
  </div>
</template>
